<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>todos</title>
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"></script>
  <style>
  .done {
    color: gray;
    text-decoration: line-through;
  }
  </style>
</head>
<body>
  <!-- 挂载点，vue 作用范围 -->
  <div id="app">
    <h2>{{title}}</h2>
    <input type="text" v-model="title" @keydown.enter="addTodo" />
    <ul>
      <li v-for="todo in todos">
        <input type="checkbox" v-model="todo.done">
        <span :class="{done:todo.done}">{{todo.title}}</span>
      </li>
    </ul>
    <div>
      <span>{{active}} / {{all}}</span>
    </div>
    全选 <input type="checkbox" v-model="allDone">
    <span>{{active}}/{{all}}</span>
  </div>
  <script>
  const App = {
    data() {
      return {
        title: 'todos',
        todos: [
          {title: '吃饭', done: false},
          {title: '睡觉', done: true},
        ]
      }
    },
    methods: {
      addTodo() {
        this.todos.push({title: this.title, done: false})
        this.title = ''
      }
    },
    computed: {
      all() {
        return this.todos.length
      },
      active() {
        return this.todos.filter(todo => !todo.done).length
      },
      // get set 两个都做 
      allDone:{
        // this -> 计算属性
       get() {
      return this.active === 0
       },
       set(val){
        //数据和界面要保持一致
        this.todos.forEach(todo => {todo.done= val})
       }
      }
    }
  }
  Vue.createApp(App).mount('#app')
  </script>
</body>
</html>